<template>
  <div class="box">
    <div class="login">
      <p class="hong">宏烨找房后台系统</p>
      <van-form>
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="用户名"
            label="账号"
            placeholder="请输入账号"
            :rules="[{ required: true, message: '请填写用户名' }]"
            class="username"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
            class="password"
          />
          <input
            type="text"
            placeholder="  请输入验证码 "
            v-model="kehuyan"
            style="
              width: 120px;
              border: none;
              border-bottom: 1px solid #ccc;
              padding: 10px;
              margin-left: 15px;
            "
          />
          <!-- <Code @getCode="ages"></Code> -->
          <img src="/api/user/captcha" alt="" />
        </van-cell-group>
        <div style="margin: 16px; position: relative; top: -60px">
          <van-button
            round
            block
            type="primary"
            native-type="submit"
            class="btn"
            @click="comit"
          >
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script setup lang="ts">
// import Code from "../../components/Code.vue";
import { ref, onMounted } from "vue";
import { POST_LOGIN } from "../../api/api.js";
const username = ref("");
const password = ref("");
let kehuyan = ref("");
const comit = () => {
  let data = {
    username: username.value,
    password: password.value,
    captcha: kehuyan.value,
  };
  console.log(data)
  POST_LOGIN(data).then((res) => {
    console.log(res);
    
    window.localStorage.setItem("token", res.data.token);
    window.location.href = "/home/Availability";
    window.localStorage.setItem("ben", `"/home/Availability"`);
  }).catch((err) => {
    if(err.response.status===403){
      alert('验证码输入错误')
    }
  });
};

onMounted(() => {});
</script>
<style lang="scss" scoped>
.box {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: url("../../assets/abc.jpg") no-repeat;
  background-size: cover;
}
.login {
  width: 23%;
  height: 43%;
  position: absolute;
  top: 25%;
  left: 65%;
  background: #fff;
  line-height: 30px;
  .name {
    width: 100%;
    height: 30%;
    // background: palegoldenrod;
    margin-top: 60px;
  }
  .hong {
    font-size: 26px;
    font-weight: 100;
    // margin-left: 40px;
    // margin-bottom: 10px;
    text-align: center;
    // line-height: 50px;
    margin-top: 10px;
    border-radius: 10px;
  }
}
.btn {
  margin-top: 100px;
}
</style>
